/*
 * @Description: 设备统计
 * @Author: kanglin
 * @Date: 2018-10-29 13:45:38
 * @Copyright: Created by Panxsoft.
 */

 <style lang="less" scoped rel="stylesheet/less" type="text/less" >
     .v-com-device-statistic, .card{
        background: #ffffff;
		border-radius:10px;
		height: 1032px;

		.card__title {
			padding-left: 50px;
			height:76px;
			font-size:24px;
			font-weight:600;
			line-height:76px;
			color:rgba(51,51,51,1);
			font-family:Segoe UI;
		}
		.card__content{
			padding-left: 50px;
			padding-right: 50px;
		}
		.card__title__icon{
			display: inline-block;
			height: 28px;
			width: 28px;
			vertical-align: -.9em;
			&>img{
				width: 100%;
				vertical-align: top;
			}
		}

		.touch{
			height: 320px;
		}
		.attributes{
			display: flex;
			list-style: none;
			justify-content:space-around;
			padding-top: 30px;
		}
		.attributes__item{
			width: 180px;
			text-align: center;
		}
		.attributes__item__icon{
			width: 48px;
			height: 48px;
			display: inline-block;
			&>img{
				width: 100%;
			}
		}

		.attributes__item__name{
			height:37px;
			font-size:26px;
			font-weight:600;
			line-height:37px;
			color:rgba(51,51,51,1);
			margin-bottom: 18px;
		}

		.attributes__item__result{
			font-size:20px;
			font-weight:600;
			line-height:22px;
			color:rgba(150,167,254,1);
			height: 30px;
			margin-bottom: 2px;
		}
		.attributes__item__value{
			font-size:20px;
			font-weight:600;
			line-height:22px;
			color:rgba(150,167,254,1);
		}

		.circle-inner{
			position: relative;
			width: 486px;
			height: 486px;
		}

		.circle-inner__center{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			text-align: center;
		}

		.circle-inner__top{
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			margin-top: 70px;
		}

		.circle-inner__top-left{
			position: absolute;
			top: 0;
			left: 0;
			margin-top: 166px;
			margin-left: 50px;

		}

		.circle-inner__top-right{
			position: absolute;
			top: 0;
			right: 0;
			margin-top: 166px;
			margin-right: 50px;
		}

		.circle-inner__bottom-left{
			position: absolute;
			margin-top: 320px;
			margin-left: 60px;
			top: 0;
			left: 0;
		}

		.circle-inner__bottom-right{
			position: absolute;
			margin-top: 320px;
			margin-right: 64px;
			top: 0;
			right: 0;
		}

		.circle-inner__center__label{
			width:106px;
			font-size:30px;
			font-family:Segoe UI;
			font-weight:600;
			line-height:43px;
			color:rgba(51,51,51,1);
			opacity:1;
		}

		.circle-inner__center__value{
			width:106px;
			font-size:30px;
			font-family:Segoe UI;
			font-weight:600;
			line-height:43px;
			color:rgba(51,51,51,1);
			opacity:1;
		}

		.circle-inner__bottom-left__name,
		.circle-inner__bottom-right__name,
		.circle-inner__top-left__name,
		.circle-inner__top-right__name,
		.circle-inner__top__name{
			height:30px;
			font-size:20px;
			font-weight:600;
			line-height:30px;
			color:rgba(178,178,178,1);
			cursor: pointer;
		}

		.circle-inner__bottom-left__result,
		.circle-inner__bottom-right__result,
		.circle-inner__top-left__result,
		.circle-inner__top-right__result,
		.circle-inner__top__result{
			height:24px;
			font-size:16px;
			font-weight:600;
			line-height:24px;
			color:rgba(178,178,178,1);
			cursor: pointer;
		}

		.card__content.image{
			margin-top: 22px;
		}

		.circle-inner div.active{
			.circle-inner__bottom-left__result,
			.circle-inner__bottom-right__result,
			.circle-inner__top-left__result,
			.circle-inner__top-right__result,
			.circle-inner__top__result{
				color: #96A7FE;
			}

			.circle-inner__bottom-left__name,
			.circle-inner__bottom-right__name,
			.circle-inner__top-left__name,
			.circle-inner__top-right__name,
			.circle-inner__top__name{
				color: #96A7FE;
			}
		}
    }

 </style>

<template>
	<div class="v-com-customer-statistic card">
		<div class="card__title">
			智能测肤占比
		</div>
		<div class="card__content touch">
			<ul class="attributes">
				<li class="attributes__item">
					<div class="attributes__item__icon">
						<img
							src="//gz.bcebos.com/v1/beauty-mirror/web_admin/admin-home/组 21@2x.png"
							alt="">
					</div>
					<p class="attributes__item__name">
						水分
					</p>
					<p class="attributes__item__result">
						{{ moisture.title || $t('common.unknown') }}
					</p>
					<p class="attributes__item__value">
						{{ moisture.proportion? moisture.proportion +'%': $t('common.unknown') }}
					</p>
				</li>

				<li class="attributes__item">
					<div class="attributes__item__icon">
						<img
							src="//gz.bcebos.com/v1/beauty-mirror/web_admin/admin-home/组 20@2x.png"
							alt="">
					</div>
					<p class="attributes__item__name">
						油分
					</p>
					<p class="attributes__item__result">
						{{ oil.title || $t('common.unknown') }}
					</p>
					<p class="attributes__item__value">
						{{ oil.proportion ? oil.proportion+'%' : $t('common.unknown') }}
					</p>
				</li>

				<li class="attributes__item">
					<div class="attributes__item__icon">
						<img
							src="//gz.bcebos.com/v1/beauty-mirror/web_admin/admin-home/组 19@2x.png"
							alt="">
					</div>
					<p class="attributes__item__name">
						弹性
					</p>
					<p class="attributes__item__result">
						{{ elastic.title || $t('common.unknown') }}
					</p>
					<p class="attributes__item__value">
						{{ elastic.proportion ? elastic.proportion+'%' : $t('common.unknown') }}
					</p>
				</li>
			</ul>
		</div>

		<div class="card__title">
			3D测肤占比
		</div>
		<div class="card__content image">
			<i-circle
				:size="486"
				:trail-width="3"
				:stroke-width="3"
				:percent="percent"
				stroke-color="#96A7FE">
				<div class="circle-inner">
					<div class="circle-inner__center">
						<p class="circle-inner__center__label">占比</p>
						<p class="circle-inner__center__value">{{ percent.toFixed(2)+'%' }}</p>
					</div>
					<div
						:class="{active: active_item === 'oil'}"
						class="circle-inner__top"
						@mouseover="handleMouseover('oil', getImageData.oil.count, getImageData.oil.total_count)">
						<p class="circle-inner__top__name">· 油脂测试</p>
						<p class="circle-inner__top__result">{{ getImageData.oil.levelname || $t('common.unknown') }}</p>
					</div>

					<div
						:class="{active: active_item === 'moisture'}"
						class="circle-inner__top-left"
						@mouseover="handleMouseover('moisture', getImageData.moisture.count, getImageData.moisture.total_count)">
						<p class="circle-inner__top-left__name">· 水分测试</p>
						<p class="circle-inner__top-left__result">{{ getImageData.moisture.levelname || $t('common.unknown') }}</p>
					</div>

					<div
						:class="{active: active_item === 'pigment'}"
						class="circle-inner__top-right"
						@mouseover="handleMouseover('pigment', getImageData.pigment.count, getImageData.pigment.total_count)">
						<p class="circle-inner__top-right__name">· 色素分解度</p>
						<p class="circle-inner__top-right__result">{{ getImageData.pigment.levelname || $t('common.unknown') }}</p>
					</div>

					<div
						:class="{active: active_item === 'sensitivity'}"
						class="circle-inner__bottom-left"
						@mouseover="handleMouseover('sensitivity', getImageData.sensitivity.count, getImageData.sensitivity.total_count)">
						<p class="circle-inner__bottom-left__name">· 皮肤敏感度</p>
						<p class="circle-inner__bottom-left__result">{{ getImageData.sensitivity.levelname || $t('common.unknown') }}</p>
					</div>

					<div
						:class="{active: active_item === 'cleanliness'}"
						class="circle-inner__bottom-right"
						@mouseover="handleMouseover('cleanliness', getImageData.cleanliness.count, getImageData.cleanliness.total_count)">
						<p class="circle-inner__bottom-right__name">· 毛孔清洁度</p>
						<p class="circle-inner__bottom-right__result">{{ getImageData.cleanliness.levelname || $t('common.unknown') }}</p>
					</div>

				</div>
			</i-circle>
		</div>

	</div>
</template>

<script>
const IMAGE_TESTING_MOISTURE = 2; // 水
const IMAGE_TESTING_OIL = 3; // y油脂
const IMAGE_TESTING_SENSITIVITY = 1; // 敏感度
const IMAGE_TESTING_PIGMENT = 5; // 色素
const IMAGE_TESTING_CLEANLINESS = 4; // 毛孔清洁度

export default {
	name: 'TestingStatistic',
	props: {
		imageTestingData: {
			type: Object,
			default() {
				return {
					items: [],
					all_count: 0,
				};
			},
		},
		touchTestingData: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {
			columns1: [
				{
					align: 'center',
					title: '客户名称',
					key: 'name',
				},
				{
					align: 'center',
					title: '店铺数量',
					key: 'age',
				},
				{
					align: 'center',
					title: '设备数量',
					key: 'address',
				},
				{
					align: 'center',
					title: '测肤次数',
					key: 'address',
				},
				{
					align: 'center',
					title: '试妆次数',
					key: 'times',
				},
				{
					align: 'center',
					title: '用户量',
					key: 'times',
				},
			],
			data1: [

			],
			loading: false,

			active_item: 'oil',
			percent: 0,
		};
	},
	computed: {
		oil() {
			const [oil] = this.touchTestingData.filter(item => item.skin_type === 'oil');
			return oil || {};
		},
		moisture() {
			const [moisture] = this.touchTestingData.filter(item => item.skin_type === 'water');
			return moisture || {};
		},
		elastic() {
			const [elastic] = this.touchTestingData.filter(item => item.skin_type === 'flex');
			return elastic || {};
		},

		/**
		 *  图像
		 */
		getImageData() {
			const oil = {};
			const moisture = {};
			const sensitivity = {};
			const pigment = {};
			const cleanliness = {};
			this.imageTestingData.items.forEach((item) => {
				switch (item.itemsid) {
				case IMAGE_TESTING_OIL:
					Object.assign(oil, item);
					break;
				case IMAGE_TESTING_MOISTURE:
					Object.assign(moisture, item);
					break;
				case IMAGE_TESTING_SENSITIVITY:
					Object.assign(sensitivity, item);
					break;
				case IMAGE_TESTING_PIGMENT:
					Object.assign(pigment, item);
					break;
				case IMAGE_TESTING_CLEANLINESS:
					Object.assign(cleanliness, item);
					break;
				default:
					break;
				}
			});
			return {
				oil, moisture, sensitivity, pigment, cleanliness,
			};
		},
	},
	watch: {
		imageTestingData: {
			deep: true,
			handler(data) {
				if (data && data.items.length > 0) {
					const [image_oil] = data.items.filter(item => item.itemsid === IMAGE_TESTING_OIL);
					if (image_oil) {
						this.percent = this.calculatePercent(image_oil.count, image_oil.total_count);
					}
				}
			},
		},
	},
	methods: {

		/**
		 * 处理鼠标事件
		 */
		handleMouseover(name, item_count, total_count) {
			this.active_item = name;
			this.percent = this.calculatePercent(item_count, total_count);
		},

		/**
		 * 计算占比
		 */
		calculatePercent(item_count, total_count) {
			const total = parseInt(total_count, 10);
			const percent_value = total ? (parseInt(item_count, 10) / total) * 100 : 0;
			return Number(percent_value);
		},
	},
};
</script>

 <style scoped>

 </style>
